<template>
  <div class="item">
    <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)" />
    <!-- 这种方法也能实现同样功能，但是违反了不能修改props内属性的原则 -->
    <!-- <input type="checkbox" v-model="todo.done" /> -->
    <label for>{{todo.title}}</label>
    <button @click="handleDelete(todo.id)">删除</button>
  </div>
</template>

<script>
export default {
  name: 'Item',
  props: ['todo', 'checkTodo', 'deleteItem'],
  methods: {
    handleCheck (id) {
      this.checkTodo(id)
    },
    handleDelete (id) {
      if (confirm('确定要删除吗？')) {
        this.deleteItem(id)
      }
    }
  }
}
</script>

<style scoped>
input {
  zoom: 110%;
}

.item {
  position: relative;
  border: 1px solid #d1d1d1;
  border-radius: 5px;
  padding: 10px;
}

.item:hover {
  background-color: #ddd;
}

.item button {
  position: absolute;
  top: 7px;
  right: 10px;
  display: none;
  border: none;
  border-radius: 5px;
  padding: 5px;
  font-size: 12px;
  color: #fff;
  background-color: #be3a31;
  cursor: pointer;
}

.item:hover button {
  display: block;
}

label {
  margin-left: 10px;
}
</style>
